<template>
	<view class="goods-wrap" v-if="goodsInfo">
		<image class="goods-image" :src="goodsInfo.thumbUrl" mode="aspectFit" />
		<view class="goods-title">
			<view class="goods-title-name flex-row">
				<text class="goods-title-word">{{ goodsInfo.name }}</text>
				<text class="goods-title-hosp">{{ goodsInfo.hospitalName }}</text>
			</view>

			<view class="goods-title-price flex-row">
				<text class="goods-price-word">售价</text>
				<text class="goods-price-number">{{ goodsInfo.salePrice }}</text>
				<text class="goods-price-unit">元</text>
			</view>
		</view>
		<view class="goods-tab-bd flex-row">
			<view class="goods-tab-layer flex-col">
				<view class="goods-tab-info">快递</view>
				<view class="goods-tab-number">{{ goodsInfo.transportPrice > 0 ? goodsInfo.transportPrice : '免运费' }}</view>
			</view>
			<view class="goods-tab-split"></view>
			<view class="goods-tab-layer flex-col">
				<view class="goods-tab-info">已销</view>
				<view class="goods-tab-number">{{ goodsInfo.saleVolume }}</view>
			</view>
			<view class="goods-tab-split"></view>
			<view class="goods-tab-layer flex-col ">
				<view class="goods-tab-info">库存</view>
				<view class="goods-tab-number">{{ goodsInfo.inventory }}</view>
			</view>
		</view>

		<view class="goods-group">
			<view class="goods-group-title">商品说明</view>

			<scroll-view scroll-y class="privacy-popup-content">
				<u-mp-html containerStyle="width:690rpx;height:100%" :content="goodsInfo.description" :editable="false" />
			</scroll-view>
		</view>

		<view class="goods-pic-list"><image class="goods-pic-url" mode="aspectFit" v-for="(pic, index) in pictureUrlList" :key="index" :src="pic" /></view>
	
		<view class="goods-shopping-cart" direction="all" @click="gotoShoppingCart">
			<view class="goods-shopping-wrap">
				<image src="https://cdn.quantifynet.cn/dti/icon_list_shopping_car@2x.png"></image>
				<view v-if="goodsTotal > 0">{{ goodsTotal }}</view>
			</view>
		</view>

		<u-bottom-shopping @addShoppingCart="addOrSubShoppingCart" @gotoPayment="gotoPayment"></u-bottom-shopping>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '', //商品id
			goodsInfo: null,
			goodsTotal: 0 //购物车总数
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.goodsDetail();
		console.log(this.goodsInfo)
	},
	computed: {
		pictureUrlList() {
			return this.goodsInfo ? this.goodsInfo.pictureUrls.split(',') : [];
		}
	},
	onShow() {
		this.findTotalShoppingCart();
	},
	onHide() {},
	onUnload() {},
	methods: {
		/**
		 * 查询商品详情
		 */
		goodsDetail() {
			this.$api
				.goodsDetail({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.goodsInfo = res.result;
					}
				});
		},

		/**
		 * 查询购物车
		 */
		findTotalShoppingCart() {
			this.$api.findTotalShoppingCart({}).then(res => {
				if (res.code == 200) {
					this.goodsTotal = res.result.goodsTotal;
				}
			});
		},

		/**
		 * 加入购物车
		 */
		addOrSubShoppingCart() {
			if (this.goodsInfo.inventory <= 0) {
				uni.showToast({
					title: '该商品库存不足',
					icon: 'none'
				});
				return;
			}
			this.$api
				.addOrSubShoppingCart({
					data: {
						goodsId: this.id,
						num: 1
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.findTotalShoppingCart();
					}
				});
		},

		/**
		 * 跳转购物车
		 */
		gotoShoppingCart() {
			if (this.goodsTotal > 0) {
				this.gotoRouter('/pages-client/store/shoppingCart');
			} else {
				uni.showToast({
					title: '请先添加商品到购物车',
					icon: 'none'
				});
			}
		},

		/**
		 * 跳转支付
		 */
		gotoPayment() {
			if (this.goodsInfo.inventory <= 0) {
				uni.showToast({
					title: '请先添加商品到购物车',
					icon: 'none'
				});
				return;
			}

			//settlementModel 0商品结算  1购物车结算
			this.gotoRouter('/pages-client/store/payment?settlementModel=0&goodsId=' + this.id);
		}
	}
};
</script>

<style lang="less">
.goods-wrap {
	width: 100vw;
	// height: auto;
	padding-bottom: 160rpx;
	box-sizing: border-box;

	.goods-shopping-cart {
		position: fixed;
		z-index: 99;
		bottom: 250rpx;
		right: 80rpx;
		width: 96rpx;
		height: 97rpx;
		.goods-shopping-wrap {
			position: relative;

			> image {
				width: 96rpx;
				height: 97rpx;
			}
			> view {
				position: absolute;
				width: 36rpx;
				height: 36rpx;
				background: #e95c50;
				border: 2rpx solid #ffffff;
				border-radius: 50%;
				text-align: center;
				font-size: 18rpx;
				line-height: 35rpx;
				color: #ffffff;
				top: -13rpx;
				right: -13rpx;
			}
		}
	}
	


	.goods-image {
		width: 750rpx;
		height: 382rpx;
	}
	.goods-title {
		width: 750rpx;
		padding: 24rpx 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 2rpx;
		
		.goods-title-name{
			justify-content: space-between;
			.goods-title-word {
				color: rgba(51, 51, 51, 1);
				font-size: 34rpx;
			}
			.goods-title-hosp{
				color: #e95c50;
			}
		}
		
		
		.goods-title-price {
			align-items: center;
			margin-top: 11rpx;
			.goods-price-word {
				color: rgba(137, 30, 7, 1);
				font-size: 24rpx;
				margin-right: 16rpx;
			}
			.goods-price-number {
				color: rgba(137, 30, 7, 1);
				font-size: 38rpx;
				margin-right: 8rpx;
			}
			.goods-price-unit {
				padding-top: 6rpx;
				color: rgba(137, 30, 7, 1);
				font-size: 24rpx;
			}
		}
	}
	.goods-tab-bd {
		width: 750rpx;
		height: 130rpx;
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx 0;
		box-sizing: border-box;
		.goods-tab-layer {
			width: 33%;
			height: 82rpx;
			align-items: center;
			.goods-tab-info {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-bottom: 8rpx;
			}
			.goods-tab-number {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.goods-tab-split {
			width: 1rpx;
			height: 71rpx;
			background-color: rgba(151, 151, 151, 0.4);
		}
	}
	.goods-group {
		width: 750rpx;
		margin-top: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		.goods-group-title {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 4rpx;
		}
		.goods-group-txt {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding-top: 16rpx;
		}
		.goods-group-art {
			padding-top: 16rpx;
		}
	}

	.goods-pic-list {
		width: 750rpx;
		box-sizing: border-box;
		padding: 24rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		.goods-pic-url {
			width: 702rpx;
			height: 480rpx;
		}
	}

	.goods-tips-group {
		width: 750rpx;
		background-color: #fff;
		align-items: center;
		padding: 24rpx 87rpx;
		box-sizing: border-box;
		.goods-tips-title {
			color: rgba(51, 51, 51, 1);
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}
		.goods-tips-content {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-bottom: 30rpx;
			.title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.txt {
				color: #666666;
			}
		}
	}
}
</style>
